<template>
  <CellGroup>
    <Cell :center="true" v-for="item of indexes" :title="item.name" :value-class="item.changes >= 0 ? 'rise' : ''">
      <b>{{ item.index }}</b>
      <b>{{ item.changes }}</b>
      <b>{{ item.changeRatio }}%</b>
    </Cell>
    <slot></slot>
  </CellGroup>
</template>

<script setup>
  import { ref, inject, onMounted, onUnmounted } from 'vue';
  import { CellGroup, Cell } from 'vant';

  import refresher from '@/libs/autoRefreshShares';

  const $http = inject('$http');

  const indexes = ref([]);

  function getIndexs() {
    $http.get('/api/shares/index', { hideTip: true }).then(res => {
      indexes.value = res.datas;
    });
  }

  onMounted(() => {
    getIndexs();

    refresher.start({
      done() {
        getIndexs();
      }
    });
  });

  onUnmounted(() => {
    refresher.stop();
  });
</script>

<style lang="less" scoped>
  :deep(.van-cell) {
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;

    > .van-cell__title {
      font-weight: bold;
      flex: none;
      width: 85px;
    }

    > .van-cell__value {
      display: flex;
      flex: 2;
      width: 100%;
      flex-flow: row wrap;
      color: rgb(25, 190, 107);

      &.rise {
        color: rgb(237, 64, 20);
      }

      > b {
        flex: 1;
        text-align: left;
        font-size: 13px;

        &:first-of-type {
          flex: none;
          width: 110px;
        }
      }

      > .complexs {
        width: 100%;
        display: flex;
        font-size: 13px;
        align-items: center;
        white-space: nowrap;
        margin: 0;
        padding: 0;
        line-height: 1.3;

        > span {
          flex: 1;
          font-style: normal;
          text-align: left;
          font-weight: bold;

          &:first-of-type {
            flex: none;
            width: 110px;
          }
        }
      }
    }

    > .van-cell__right-icon {
      width: 20px;
    }
  }
</style>
